<template>
  <div class="loginIndexRight" v-if="control">
    <collapseComponent
      v-for="(cr, crIndex) in control.right"
      :key="cr.id"
      :title="cr.name"
      direction="column"
      :open="cr.open"
      :rightIndex="crIndex"
      @switchCollapse="switchCollapse"
    >
      <div
        class="catalog"
        v-for="(crc, crcIndex) in cr.catalog"
        :key="crc.id"
        :style="{ display: crc.display }"
      >
        <component
          v-bind:is="crc.controlName"
          v-if="crc.display === 'block'"
          :item="crc"
          :id="control.id"
          :rightIndex="crIndex"
          :catalogIndex="crcIndex"
          @updateParent="updateParent"
        ></component>
      </div>
    </collapseComponent>


    
  </div>
</template>
<script>

import { mapState } from "vuex";
import Bus from "@/utils/bus";
export default {
  name: "loginIndexRight",
  data() {
    return {
      control: null,
      //为了防止页面初始化时，触发不必要的通知更新，此处设置标识符，初始化后2秒置为true
      needUpdate: false,
    };
  },
  created() {},
  props: ["controlData"],
  components: {
    collapseComponent: () => import("../../components/collapseComponent"),
    radioComponent: () => import("../right/components/lone/radioComponent.vue"),
    colorComponent: () => import("../right/components/lone/colorComponent.vue"),
    chooseImageComponent: () => import("../right/components/lone/chooseImageComponent.vue"),
    sliderComponent: () => import("../right/components/lone/sliderComponent.vue"),
    inputComponent: () => import("../right/components/lone/inputComponent.vue"),
    chooseLinkComponent: () => import("../right/components/lone/chooseLinkComponent.vue"),
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    setTimeout(() => {
      this.needUpdate = true;
    }, 1000);
  },
  methods: {
    //初始化
    init() {
      if (this.controlData) {
        this.control = null;
        this.$nextTick(() => {
          this.control = JSON.parse(JSON.stringify(this.controlData));
        });
      }
    },
    //从单个子组件中更新到大类组件这里来
    updateParent(params) { 
      let p = JSON.parse(params),
        ri = p.rightIndex,
        ci = p.catalogIndex,
        pe = p.ename,
        pv = p.value;
      // //console.log(p);
      //登录样式
      if (pe === "loginStyle") {
        let v = JSON.parse(pv);
        this.control.right[ri].catalog[ci].value = v;
        this.control.main[pe] = v;

        
        //切换到样式1
        if (v === 1) {
          //设置页面默认背景色
          this.control.main.loginPageBgColor = "#8EB3F0";
          this.control.right[1].catalog[0].value = "#8EB3F0";
          this.control.right[1].catalog[0].default = "#8EB3F0";
          this.$parent.$refs.IndexMainComponent.item.loginPageBgColor = "#8EB3F0";
          
          //设置页面默认链接文字颜色
          this.control.main.loginLinkFontColor = "#0079FE";
          this.control.right[1].catalog[1].value = "#0079FE";
          this.control.right[1].catalog[1].default = "#0079FE";
          this.$parent.$refs.IndexMainComponent.item.loginLinkFontColor = "#0079FE";
          
          //设置页面默认按钮背景颜色
          this.control.main.loginButtonBgColor = "#5665c2";
          this.control.right[1].catalog[3].value = "#5665c2";
          this.control.right[1].catalog[3].default = "#5665c2";
          this.$parent.$refs.IndexMainComponent.item.loginButtonBgColor = "#5665c2";
          
          //将样式2的专属配置项隐藏
          this.control.right[1].catalog[4].display = "none";
          this.control.right[1].catalog[5].display = "none";
          
          //将样式1的专属配置项开启
          this.control.right[0].catalog[3].display = "block";
          //若显示头部
          if(this.control.right[0].catalog[3].value) {
            this.control.right[0].catalog[4].display = "block";
            //若头部设置方式是手动设置
            if(this.control.right[0].catalog[4].value==1) {
              this.control.right[0].catalog[5].display = "block";
              this.control.right[0].catalog[6].display = "block";
            } else if(this.control.right[0].catalog[4].value==2) {
              //若头部设置方式是从系统读取
              this.control.right[0].catalog[5].display = "none";
              this.control.right[0].catalog[6].display = "none";
            }
          
          }else{
            //若不显示头部
            this.control.right[0].catalog[4].display = "none";
            this.control.right[0].catalog[5].display = "none";
            this.control.right[0].catalog[6].display = "none";
          }
          
        }
        //切换到样式2
        if (v === 2) {
          //设置页面默认背景色
          this.control.main.loginPageBgColor = "#FF7664";
          this.control.right[1].catalog[0].value = "#FF7664";
          this.control.right[1].catalog[0].default = "#FF7664";
          this.$parent.$refs.IndexMainComponent.item.loginPageBgColor = "#FF7664";
          //设置页面默认链接文字颜色
          this.control.main.loginLinkFontColor = "#f72924";
          this.control.right[1].catalog[1].value = "#f72924";
          this.control.right[1].catalog[1].default = "#f72924";
          this.$parent.$refs.IndexMainComponent.item.loginLinkFontColor = "#f72924";
          //设置页面默认按钮背景颜色
          this.control.main.loginButtonBgColor = "#f82c27";
          this.control.right[1].catalog[3].value = "#f82c27";
          this.control.right[1].catalog[3].default = "#f82c27";
          this.$parent.$refs.IndexMainComponent.item.loginButtonBgColor = "#f82c27";
          //将样式1的专属配置项隐藏
          this.control.right[0].catalog[3].display = "none";
          this.control.right[0].catalog[4].display = "none";
          this.control.right[0].catalog[5].display = "none";
          this.control.right[0].catalog[6].display = "none";
          //将样式2的专属配置项开启
          this.control.right[1].catalog[4].display = "block";
          this.control.right[1].catalog[5].display = "block";
        }

        let control = JSON.stringify(this.control);
        this.control = null;
        this.$nextTick(() => {
          this.control = JSON.parse(control);
          Bus.$emit(
            "updateSetLoginMainComponentAllData",
            JSON.stringify({
              main: this.control.main,
            })
          );
        });

        return false;
      }

      //模板名称
      // if (pe === "moduleName") {
      //   this.control.right[ri].catalog[ci].value = pv;
      //   this.control.main[pe] = pv;
      // }

      //显示头部
      if (pe === "showStyle1Head") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        if(pv) {
          this.control.right[0].catalog[4].display="block"
          if(this.control.right[0].catalog[4].value==1) {
            this.control.right[0].catalog[5].display="block"
            this.control.right[0].catalog[6].display="block"
          }
        }else{
          this.control.right[0].catalog[4].display="none"
          this.control.right[0].catalog[5].display="none"
          this.control.right[0].catalog[6].display="none"
        }
      }

      //上传头图
      if (pe === "loginHeadImg") { console.log()
        this.control.right[ri].catalog[ci].value = pv;
        this.control.right[ri].catalog[ci].default = pv;
        this.control.main[pe] = pv;
      }

      //头部设置方式---样式1
      if (pe === "setStyle1HeadType") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
        if(pv==1) {
          //手动设置
          this.control.right[0].catalog[5].display="block"
          this.control.right[0].catalog[6].display="block"
        }else if(pv==2){
          //从系统读取
          this.control.right[0].catalog[5].display="none"
          this.control.right[0].catalog[6].display="none"
        }
      }

      //头部Logo---样式1
      if (pe === "style1HeadLogo") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //头部文字---样式1
      if (pe === "style1HeadTitle") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //显示注册---样式1
      if (pe === "style1DisplayRegister") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //登录页背景颜色
      if (pe === "loginPageBgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //登录页链接文字颜色
      if (pe === "loginLinkFontColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //登录页按钮文字颜色
      if (pe === "loginButtonFontColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //登录页按钮背景颜色
      if (pe === "loginButtonBgColor") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //上边角---样式2
      if (pe === "borderRadiusTop") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }

      //下边角---样式2
      if (pe === "borderRadiusBottom") {
        this.control.right[ri].catalog[ci].value = pv;
        this.control.main[pe] = pv;
      }


      //更新到main下的子组件
      if (p.needUpdateMainChild) {
        //更新到main中具体组件中的数据
        if (this.needUpdate) {
          Bus.$emit("updateSetLoginMainComponentData", {
            data: pv,
            ename: pe,
          });
        }
      }
    },
    //拉抽屉
    switchCollapse(params) {
      this.control.right[params.rightIndex].open = params.open;
    },
  },
  computed: {},
  watch: {},
};
</script>
<style scoped lang="scss">
.loginIndexRight {
  .catalog {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 10px 15px 10px 0px;
    box-sizing: border-box;
  }
}
</style>
